<template>
    <el-row v-if="fieldValue">
        <template v-for="(item,inx) in data['spec']">
            <el-col :span="24" :key="inx" style="margin-bottom:20px;">
                <el-row>
                    <el-col :span="18">
                        <el-input v-model="item.title" @input="setValue">
                            <template slot="prepend" >规则名称</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="danger" icon="el-icon-delete" @click.stop="delInput(inx)">删除</el-button>
                        <el-button type="primary" icon="el-icon-plus" @click.stop="addChild(inx)">添加规格值</el-button>
                    </el-col>
                    <el-col :span="24" style="margin-top:10px;">
                        <el-row>
                            <template v-for="(vl,vk) in item.option">
                                <el-col :span="8" :key="vk">
                                    <div style="width: 70%;float: left;">
                                        <el-input v-model="item.option[vk]" @input="setValue">
                                            <template slot="prepend" >规则值</template>
                                            <template slot="append" >如：S、M、L</template>
                                        </el-input>
                                    </div>
                                     <el-button type="danger" icon="el-icon-delete" @click.stop="delChild(inx,vk)">删除</el-button>
                                </el-col>
                            </template>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
        </template>
        
        <el-col :span="24" style="margin-top:10px;">
            <el-row>
                <el-col :span="18">
                <label>添加规格名称,如：尺码、颜色、口味</label>
                </el-col>
                <el-col :span="6">
                <el-button type="primary" icon="el-icon-plus" @click.stop="addInput">添加规格名</el-button>
                <!-- <el-button type="primary" icon="el-icon-plus" @click="getTableData">生成规格</el-button> -->
                </el-col>
            </el-row>
        </el-col>

        <el-col :span="24" style="margin-top:10px;">
             <el-table
                :data="data['tableData']"
                border
                style="width: 100%">
                <el-table-column prop="thumb" label="图片" width="200">
                    <template slot-scope="scope">
                        <upload-html  v-model="scope.row.thumb" :value="scope.row.thumb" v-bind="{ 'options': [], 'children': {}, 'prop': 'thumb', 'action': '', 'autoUpload': false, 'limit': 1, 'UploadType': 'spec', 'isPrivate': 1 }"></upload-html>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="规格" width="180">
                </el-table-column>
                <el-table-column prop="stock" label="库存" >
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.stock" :disabled="scope.row.is_stock" >
                            <template slot="prepend">
                                <el-switch
                                    v-model="scope.row.is_stock"
                                    active-text="无限库存"
                                    inactive-text="指定库存"
                                    @change="checkSwicth(scope.$index)" >
                                </el-switch>
                            </template>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" width="180">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.price" ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="所需积分" width="180">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.score" ></el-input>
                    </template>
                </el-table-column>
                </el-table>
        </el-col>
    </el-row>
</template>

<script>
  import UploadHtml from './upload';

  export default {
    components:{UploadHtml},
    props: {
      value: {
        type: [Object,Array],
        default:()=>{
            return {
                spec:[],
                tableData:[]
            }
        }
      }
    },
    data(){
        return {
            data:JSON.parse(JSON.stringify(this.value)),
        }
    },
    computed: {
      fieldValue: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    },
    watch: {
      fieldValue:{
          handler(val,old){
              this.data = {...val};
          },
          deep:true
      }
    },
    methods:{
        addInput(){
            console.log(this.data);
            var  obj = {
                title:'',
                option:[]
            };
            if(!this.data.spec) {
                this.data.spec = [];
            }
            this.data.spec.push(obj);
            this.setValue();
        },
        addChild(inx){
            this.data.spec[inx].option.push('');
            this.setValue();
        },
        delInput(inx){
            this.data.spec.splice(inx, 1);
            this.setValue();
        },
        delChild(inx,child){
            this.data.spec[inx].option.splice(child, 1);
            this.setValue();
        },
        setValue(){
            this.getTableData();
            console.log(this.data,'+++++++++++++++++++++');
            this.$emit('input', this.data)
        },
        getTableData(){
            var option = [];
            for(var i in this.data.spec) {
                option.push(this.data.spec[i].option);
            }

            if(option.length < 2) {
                return false;
            }
            var d =  this.descartes(option);

            console.log(this.data.tableData)
            var arr = [];
            for(var i in d) {
                var obj = {};
                obj.title = d[i].join('+');
                obj.stock = 0;
                obj.thumb = '';
                obj.is_stock = true;
                obj.price = 0.00;
                obj.score = 0;

                arr.push(obj);
            }

            for(var i in arr) {
                var flag = true;
                for(var j in this.data.tableData) {
                    if(arr[i].title === this.data.tableData[j].title) {
                        arr[i] = this.data.tableData[j];
                        break;
                    }
                }
            }

            this.data.tableData = arr;

        },
        //笛卡尔积算法
        descartes: function (array) {

            if (array.length < 2) return array[0] || [];
            return [].reduce.call(array, function (col, set) {
                var res = [];
                col.forEach(function (c) {
                set.forEach(function (s) {
                    var t = [].concat(Array.isArray(c) ? c : [c]);
                    t.push(s);
                    res.push(t);
                })
                });
                return res;
            });
        },
        checkSwicth(index){
            this.data.tableData[index].stock = 0;
        }
    }
  }
</script>